<!--管理中心-->
<template>
	<div id="managerMain">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="密码修改" name="first">
				<div id='manager'>
					<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
						<h3 class="alter">修改你的密码</h3>
						<el-form-item label="密码" prop="pass" class="pass">
							<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="确认密码" prop="checkPass">
							<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="updPwd(ruleForm2)">提交</el-button>
							<el-button @click="resetForm('ruleForm2')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="信息修改" name="second">
				<div id='manager'>
					<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
						<h3 class="alter">修改你的信息</h3>
						<el-form-item label="头像" prop="checkPass">
							<el-upload
							  class="upload-demo"
							  ref="upload"
							  action="#"
							  :auto-upload="false"
							  :on-preview="handlePreview"
							  :on-remove="handleRemove"
							  :file-list="fileList"
							  list-type="picture"
							  >
							  <el-button size="small" type="primary">选择头像</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm2(fileList)">提交</el-button>
							<el-button @click="resetForm('ruleForm2')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm2.checkPass !== '') {
						this.$refs.ruleForm2.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm2.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				ispass: true,
				ruleForm2: {
					pass: '',
					checkPass: ''
				},
				rules2: {
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}]
				},
				activeName: 'second',
				fileList: []
			};
		},
		methods: {
			//修改密码
			updPwd(pwd) { //根据id获取学生的信息
				//获取学生的信息
				let studentId = this.$cookies.get("cid")
				this.$axios(`/api/getu`, {
					params: {
						userId: studentId
					}
				}).then(res => {
					console.log(res);
					//赋值
					res.data.userPwd = pwd.pass
					//开始重置密码
					this.startUpdPwd(res.data);
				});

			},
			//开始修改密码
			startUpdPwd(userinfo) {
				this.$axios({ //修改密码
					url: '/api/updpwd',
					method: 'post',
					data: userinfo
				}).then(res => {
					if (res.data.code == 200) { //修改成功提示
						this.$message({
							message: '密码修改成功',
							type: 'success'
						})
					} else {
						this.$message({
							message: '密码修改失败',
							type: 'error'
						})
					}
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleClick(tab, event) {
				console.log(tab, event)
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			submitForm2(f){
				console.log(this.fileList);  // 感兴趣的小伙伴可以在控制台输出下这里
			}
		}
	}
</script>

<style scoped>
	#manager .pass label {
		color: red;
		font-size: 20px;
	}

	#manager {
		width: 600px;
		margin: 0 auto;
		margin-top: 100px;
		text-align: center;
		margin-bottom: 300px;
	}

	#manager .alter {
		margin: 30px 0 20px 75px;
	}
</style>
